<template>
  <div class="search-history">
    <van-cell title="搜素历史">
      <div v-if="isDeleteShow">
      <span @click="searchHistorys.splice(0)">全部删除</span>
      &nbsp;&nbsp;
      <span @click="isDeleteShow=false">完成</span>
      </div>
      <van-icon v-else name="delete" @click="isDeleteShow=true"></van-icon>
    </van-cell>
    <van-cell
    :title="item"
    v-for="(item,index) in searchHistorys"
    :key="index"
    @click="onSearchItemClick(item,index)"
    >
      <van-icon v-show="isDeleteShow" name="close" />
    </van-cell>
  </div>
</template>

<script>
export default {
  name: 'SearchHistory',
  components: {},
  props: {
    searchHistorys: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      isDeleteShow: false // 控制删除显示与隐藏
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    onSearchItemClick (item, index) {
      if (this.isDeleteShow) {
        // 删除状态,删除历史记录
        this.searchHistorys.splice(index, 1)
      } else {
        // 非删除状态，直接进入搜索
        this.$emit('search', item)
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>
